<template>
  <li class="TodoLI">
    <!-- 选中状态框 -->
    <input type="checkbox" :checked="isAny" @change="handleChange" />
    <!-- 编辑框 -->
    <input
      type="text"
      v-if="isEdit"
      v-focus
      @blur="handleEdit"
      @keyup.enter="handleEdit"
      :value="name"
    />
    <!-- 展示文本 -->
    <span v-else @dblclick="isEdit = true">{{ name }}</span>
    <button @click="deleteItem(id)">删除</button>
  </li>
</template>

<script setup>
import { ref } from 'vue'
// 接收来自父组件的参数
const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  isAny: {
    type: Boolean,
    required: true,
  },
})

// 得到emit方法
const emit = defineEmits(['toggle', 'edit', 'del'])
/* ======================================= */
// 选中状态修改的方法
const handleChange = e => {
  // 向父组件传入 id 和选中状态
  emit('toggle', props.id, e.target.checked)
}
/* ====================================== */
// 定义是否在编辑状态的变量 ,初始为false
const isEdit = ref(false)
// 定义让元素获取焦点的自定义指令
const vFocus = {
  // el就是应用指令的dom元素
  mounted(el) {
    // 挂载完成阶段让元素获取焦点
    el.focus()
  },
}
/* ====================================== */
//
// 定义编辑框的回车按下和失去焦点时,修改内容的方法
const handleEdit = e => {
  // 切换编辑状态
  isEdit.value = false
  // 通知父组件,传入id和输入内容
  emit('edit', props.id, e.target.value)
}
/* =========================== */
// 定义小选项删除的方法
const deleteItem = id => {
  // 子传父,通知父组件根据id过滤数组
  emit('del', id)
}
</script>
<style scoped>
.TodoLI {
  list-style: none;
  position: relative;
  padding-inline: 40px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
.TodoLI:hover {
  background-color: #ddd;
}
.TodoLI span,
.TodoLI input[type='text'] {
  flex: 1;
  margin: 0 10px;
}
.TodoLI button {
  padding-inline: 10px;
  outline: none;
}
</style>
